<!DOCTYPE html>
<script src="../../dist/pep.js"></script>
<style>
  #host {
    height: 400px;
    width: 400px;
    background: lightblue;
  }
</style>

<div id="host" touch-action="none"></div>

<script>
  var s = host.webkitCreateShadowRoot();
  var d = document.createElement('div');
  var pd = document.createElement('div');
  pd.appendChild(d);
  d.style.cssText = 'height: 200px; width: 200px; background: blue;';
  d.innerHTML = '<div>Hello World</div>';
  s.appendChild(pd);
  // Register shadow dom touch-action
  PointerEventsPolyfill.register(s);
  // event listeners
  host.addEventListener('pointerdown', function(e){ console.log(e.target) });
  d.addEventListener('pointerdown', function(e){ console.log(e.target) });
</script>
